<template>
  <div class="facility-dialog">
    <div class="dialog-title">{{ deviceName }}</div>
    <div class="remote-restart-btn">
      <div class="btn-i">远程重启</div>
      <img src="@/assets/img/close.png" @click="$emit('close')"/>
    </div>

    <div class="facility-content">
      <div class="top-main">
        <div class="facility-img">
          <img src="@/assets/img/gb/img_seedling.png" />
        </div>
        <div class="top-main-right">
          <div class="facility-info">
            <div class="info-i">
              <img class="info-i-icon" src="@/assets/img/gb/icon_state.png" />
              <div>
                <div class="info-i-text">工作中</div>
                <div class="info-i-title">状态</div>
              </div>
            </div>
            <div class="info-i">
              <img class="info-i-icon" src="@/assets/img/gb/icon_flow.png" />
              <div>
                <div class="info-i-text">18.6V</div>
                <div class="info-i-title">太阳能电压</div>
              </div>
            </div>
            <div class="info-i">
              <img class="info-i-icon" src="@/assets/img/gb/icon_flow.png" />
              <div>
                <div class="info-i-text">30.8</div>
                <div class="info-i-title">工作湿度</div>
              </div>
            </div>
          </div>
          <div class="alarm-message">
            <div class="alarm-message-title">
              <img class="alarm-icon" src="@/assets/img/gb/icon_xiaox.png" />
              <div class="alarm-title">报警消息</div>
            </div>
            <div class="alarm-message-content">深层土壤湿度数据异常</div>
          </div>
        </div>
      </div>

      <div class="seedling-bottomMain">
        <div class="data-i">
          <div class="model-tltle">苗情实时监测</div>
          <div class="monitor-main">
            <video controls :src="baseUrl + '/profile/mq/1.mp4'" />
          </div>
        </div>
        <div
          style="
            display: grid;
            grid-template-columns: 47.2% 47.2%;
            column-gap: 40px;
          "
        >
          <div class="data-i">
            <div class="model-tltle">苗情数据统计</div>
            <div class="echarts-main">
              <bar :datas="bardata" />
            </div>
          </div>
          <div class="data-i">
            <div class="model-tltle">苗情数据统计</div>
            <div class="echarts-main">
              <pie :datas="pieDatas" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineAsyncComponent } from "vue";
import { deviceDetail, getSeedlingInfo,getSeedlingYears } from "@/api/deviceInfo";
const pie = defineAsyncComponent(() => import("./pie.vue"));
const bar = defineAsyncComponent(() => import("./Bar.vue"));

const baseUrl = ref("");
const deviceName = ref("");
const pieDatas = reactive({
  name: "苗情",
  unit: "个",
  data: [],
});
const bardata = reactive({
  nums: 3,
  unit: "亩",
  x: [],
  y1: {
    name: "一类苗",
    data: [],
  },
  y2: {
    name: "二类苗",
    data: [],
  },
  y3: {
    name: "三类苗",
    data: [],
  },
  stack: "3",
});

function initData(name: string, num: string) {
  baseUrl.value = import.meta.env.VITE_APP_VR_URL;
  deviceName.value = name;
  getDetail(num);
}

function getDetail(num: string) {
  getSeedlingYears({ landCode: num }).then((res) => {
    bardata.x = res.data.dates;
    bardata.y1.data = res.data.OneNum;
    bardata.y2.data = res.data.towNum;
    bardata.y3.data = res.data.threeNum;
  });
  /*饼状图*/
  getSeedlingInfo({ landCode: num }).then((response) => {
    let data = [];
    response.data.forEach((item) => {
      data.push({
        name:
          item.seedlingType == 1
            ? "一类苗"
            : item.seedlingType == 2
            ? "二类苗"
            : item.seedlingType == 3
            ? "三类苗"
            : "-",
        value: item.seedlingNum,
      });
    });
    pieDatas.data = data;
  });
}
// 暴露变量
defineExpose({
  initData,
});
</script>

<style scoped lang="scss">
@import "../deviceDialog/dialog";
</style>
